<!--  -->
<template>
  <div>

  {{ user.name }}
  {{ user.age }}

  <button @click="update">update</button>
     
   <ProvideCom1></ProvideCom1>
   <ProvideCom2></ProvideCom2>


  </div>
</template>

<script lang='ts' setup>
import { reactive,toRefs,ref,onMounted, provide} from 'vue'
import ProvideCom1 from './ProvideCom1.vue';
import ProvideCom2 from './ProvideCom2.vue';
const user=reactive({
    name:'张三',
    age:18
})

provide("user",user);

const update=()=>{
    user.name="王五";
    user.age=20;
}



</script>
<style scoped>
</style>